<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>管理员</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<body onload="xxx()">
<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-logo{
        width: 100px;
        height: 30px;
        background-image:url("../static/images/tourist.png");
        background-repeat: no-repeat;
        background-size: 30%,30%;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-nav{
        width: 500px;
        margin: 0 auto;
        margin-right: 20px;
    }
</style>

<div class="layout" id="app">
    <i-layout>
        <i-header>
            <i-menu mode="horizontal" theme="dark" active-name="1">
                <div class="layout-logo">
                    <a></a>
                </div>
                <div class="layout-nav">
                    <menu-item name="1">
                        <Icon type="ios-navigate"></Icon>
                        个人中心
                    </menu-item>
                    <menu-item name="2">
                        <Icon type="ios-keypad"></Icon>
                        咨询服务
                    </menu-item>
                    <menu-item name="3">
                        <Icon type="ios-analytics"></Icon>
                        开发区介绍
                    </menu-item>
                    <menu-item name="4">
                        <Icon type="ios-paper"></Icon>
                        <span v-on:click="exit()">退出系统</span>
                    </menu-item>
                </div>
            </i-menu>
        </i-header>
        <Layout>
            <Sider hide-trigger :style="{background: '#fff'}">
                <i-menu active-name="1-2" theme="light" width="auto" :open-names="['1','2','3']">
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="ios-navigate"></Icon>
                            个人中心
                        </template>
                        <menu-item name="1-1"><span v-on:click="info()">修改个人资料</span></menu-item>
                        <menu-item name="1-2"><span v-on:click="record()">查看咨询记录</span></menu-item>
                        <menu-item name="1-3"><span v-on:click="suggestion()">查看用户建议</span></menu-item>
                        <menu-item name="1-4"><span v-on:click="manager()">用户&员工管理</span></menu-item>

                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-keypad"></Icon>
                            咨询服务
                        </template>
                        <menu-item name="2-1"><span v-on:click="self()">自助咨询</span>></menu-item>
                        <menu-item name="2-2"><span v-on:click="consult()">人工服务</span></menu-item>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-analytics"></Icon>
                            开发区介绍
                        </template>
                        <menu-item name="3-1">
                            <span onclick="getScenery()">景区介绍</span>
                        </menu-item>
                        <menu-item name="3-2">
                            <span onclick="getPrice()">价格报表</span>
                        </menu-item>
                    </Submenu>
                </i-menu>
            </Sider>
            <Layout :style="{padding: '0 24px 24px'}">
                <i-breadcrumb :style="{margin: '24px 0'}">
                    <breadcrumb-item>个人中心</breadcrumb-item>
                    <breadcrumb-item>咨询服务</breadcrumb-item>
                    <breadcrumb-item>开发区介绍</breadcrumb-item>
                </i-breadcrumb>
                <i-content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                    {{content}}
                    <div id="info">个人信息</div>
                    <div id="record">查询记录</div>
                    <div id="suggestion">查询建议</div>
                    <div id="manager">人员管理</div>
                    <div id="self">自助服务</div>
                    <div id="consult">咨询解答</div>
                </i-content>
            </Layout>
        </Layout>
        <i-footer>
            <div style="text-align: center">
                天津职业技术师范大学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;软件1701&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;宿嘉
            </div>
        </i-footer>
    </i-layout>
</div>

<script>

    var Main=new Vue({
        el:'#app',
        data:{
            content:''
        }
    });
    function info(){
        $('#info').css('display','block');
        $('#record').css('display','none');
        $('#suggestion').css('display','none');
        $('#consult').css('display','none');
        $('#manager').css('display','none');
        $('#self').css('display','none');
    }
    function record(){
        $('#info').css('display','none');
        $('#record').css('display','block');
        $('#suggestion').css('display','none');
        $('#consult').css('display','none');
        $('#manager').css('display','none');
        $('#self').css('display','none');
    }
    function suggestion(){
        $('#info').css('display','none');
        $('#record').css('display','none');
        $('#suggestion').css('display','block');
        $('#consult').css('display','none');
        $('#manager').css('display','none');
        $('#self').css('display','none');
    }

    function consult() {
        $('#info').css('display','none');
        $('#record').css('display','none');
        $('#suggestion').css('display','none');
        $('#consult').css('display','block');
        $('#manager').css('display','none');
        $('#self').css('display','none');
    }

    function manager() {
        $('#info').css('display','none');
        $('#record').css('display','none');
        $('#suggestion').css('display','none');
        $('#consult').css('display','none');
        $('#manager').css('display','block');
        $('#self').css('display','none');
    }
    function self() {
        $('#info').css('display','none');
        $('#record').css('display','none');
        $('#suggestion').css('display','none');
        $('#consult').css('display','none');
        $('#manager').css('display','none');
        $('#self').css('display','block');
    }
</script>
<script type="text/javascript" src="../static/js/commons.js"></script>
</body>
</html>